<template>
  <div class="app-historicalData-container">
    <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="submitForm" @submitForm="submitForm"
      :buttons="fyButtons">
      <NuformItem label="召回数据日期" prop="date" width="70%" :rules="[{ required: true, message: '召回日期不能为空' }]">
        <el-date-picker v-model="formData.date" :type="dateType" value-format="yyyy-MM-dd" placeholder="选择日期"
          :picker-options="setMonthDisabled">
        </el-date-picker>
      </NuformItem>
      <NuformItem label="" prop="date" width="70%">
        <nu-button type="primary" class="searchButton" @click="formSave">召回</nu-button>
      </NuformItem>
    </NuVerifyForm>
  </div>
</template>
<script>
import nuCol from "@/components/base/col.vue";
import nutbTitle from "@/components/base/tableTitle.vue";
import NuVerifyForm from "@/components/verify-form";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import nuSelect from "@/components/base/select";
import nuButton from "@/components/base/button";
import NuTableList from "@/components/tableList/TableFormList";
import nuRow from "@/components/base/row.vue";
import nuDialog from "@/components/base/dialog";
import { getDateTime, replaceDateTime } from "@/utils/ruoyi";
export default {
  name: "historicalData",
  components: {
    nuCol,
    nutbTitle,
    NuVerifyForm,
    NuformItem,
    nuInput,
    nuSelect,
    nuButton,
    NuTableList,
    nuRow,
    nuDialog,
  },
  data() {
    return {
      fyButtons: [],
      formData: {
        date: '',
        startDate: '',
        endDate: ''
      },
      dateType: 'month',
      setMonthDisabled: {
        disabledDate(time) {
          // 获取当前的月份信息
          const date = new Date();
          const year = date.getFullYear(); // 获取当前年份，值是这样的： 2021
          let month = date.getMonth() + 1; // 获取当前月份，值是这样的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是当前月份
          if (month >= 1 && month <= 9) {
            // 如果是1月到9月就要在前面补上一个0   比如：02、07    月份这样表示
            month = "0" + month;
          }
          const nowDate = year.toString() + month.toString(); // 转换成字符串拼接，最终得到年和月，比如此时的时间是2021年7月20号，所以nowDate的值是：202107
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear(); // 获取时间选择器的年份（有很多）
          let timemonth = time.getMonth() + 1; // 与上面同理
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          const elTimeData = timeyear.toString() + timemonth.toString();
          return elTimeData > nowDate; // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'
        },
      },
    };
  },
  mounted() {
    this.formData.date = getDateTime('day')
  },
  methods: {
    /**
     * form组件内置查询事件
     */
    submitForm(val) {
      if (val) {
        this.recallData();
      }
    },
    /**
     * 重算
     */
    formSave() {
      this.$refs["formData"].submitForm("form");
    },
    /**
     * 召回数据
     */
    recallData() {
      const aD = new Date(this.formData.date)
      const date = new Date();
      let aMonth = aD.getMonth() + 1;
      let month = date.getMonth() + 1;
      if (aMonth < month) {
        const year = aD.getFullYear();
        const lastDay = new Date(year, aMonth, 0).getDate();
        this.formData.startDate = this.formData.date
        this.formData.endDate = getDateTime('month', this.formData.date) + '-' + lastDay
      } else {
        this.formData.startDate = getDateTime('month', this.formData.date) + '-01'
        this.formData.endDate = this.formData.date
      }
      let postData = {
        startDate: this.formData.startDate,
        endDate: this.formData.endDate
      }
      this.$httpGet(window.api.callData, postData)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "info",
            });
          }
        })
        .catch((err) => {
        });
    }
  },
};
</script>
<style scoped lang="scss">
.app-historicalData-container {
  height: calc(100vh - 70px);
}

.hint {
  display: block;
  font-size: 14px;
  line-height: 28px;
  color: rgba(79, 84, 112, 1);
}

.dialogHeaderSearch {
  background-color: var(--model-bgc);
  padding: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
}

.el-col {
  margin: 0;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.col {
  padding: 0px 10px 0px 10px;
}

.submitForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

::v-deep .el-form-item {
  margin: 0;
  margin-bottom: 16px !important;
}
</style>
